<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
    <title>5-3使用渐变色背景</title>
    <link rel="stylesheet" href="../common.css">
    <script src="../jquery-2.2.0.js"></script>
    <script src="../main.js"></script>
    <style>
        div{
            width:200px;
            height:120px;
            padding: 10px;
            margin: 10px auto;
            border:5px solid blue;
            display: inline-block;
            background-color: skyblue;
            color: #fff;
            text-shadow: 1px 1px 2px black;
            font-family: 微软雅黑 ;
            font-weight: bold;
            vertical-align: top;
            background: linear-gradient(to bottom, #7d97ff 0% ,skyblue 25%, #f0f0f0 61.8%,#91a200 80%, green 95%);
            background-origin: border-box;
        }
        div code{
            font-weight: normal;
            text-shadow:none;
            white-space: normal;
        }
        #borderRadius div:nth-of-type(1){
            border-radius: 20px;
        }
        #borderRadius div:nth-of-type(2){
            border-radius: 40px 20px;
        }
        #borderRadius div:nth-of-type(3) {
            border: none;
            border-radius: 40px 20px;
        }
        #borderRadius div:nth-of-type(4){
            border-radius: 10px 25px 40px 60px;
        }
        #borderRadius div:nth-of-type(5){
            border-radius: 50%;
        }
        #borderRadius div:nth-of-type(6){
            border-radius: 50%;
            width:120px;
        }
        #borderRadius div:nth-of-type(7){
            border-radius:  10px 30px 60px;
            border-style: dashed;
            width:120px;
        }
        #borderRadius div:nth-of-type(8){
            border-radius:  50% 50% 30% 30% ;
            border:5px dashed deeppink;
            width:150px;
        }
    </style>
</head>
<body>
<h1>5-3使用渐变色背景</h1>
<h3>绘制圆角边框</h3>
<section id="borderRadius">
    <div><code>border-radius: 20px;</code>这是圆角边框</div>
    <div><code>border-radius: 40px 20px;</code>指定两个半径参数40px,20px</div>
    <div><code>border: none;
        border-radius: 40px 20px;</code>不显示边框</div>
    <div><code>border-radius: 10px 25px 40px 60px;</code>绘制四个不同半径的圆角，顺序是左上10，右上25，右下40，左下60，单位px</div>
    <div><br><code>border-radius: 50%;</code>绘制一个椭圆</div>
    <div><code>border-radius: 50%;
        width:120px;</code>绘制一个正圆，需要div的宽高相同</div>
    <div>绘制虚线边框</div>
    <div>&nbsp;&nbsp;&nbsp;&nbsp;绘制馒头</div>
    <br>
    <code>绘制虚线边框代码<br>border-radius:  10px 30px 60px;
        border-style: dashed;
        width:120px;</code>
    <code>绘制馒头代码<br>border-radius:  10px 30px 60px;
        border-style: dashed;
        width:120px;</code>
</section>
</body>
</html>